<template>
	<div class="v-content">
		<div class="content-header" v-if="!isHome">
			<div class="name">{{ name }}</div>
			<v-toolset
				v-if="hasToolset"
				:has-search="hasSearch && hasSearchSlot"
				:has-export="hasExport && !!tableOptions?.length"
				:has-column="hasColumn && !!tableOptions?.length"
				:loading="loading"
				:tableOptions="tableOptions"
				v-model:searchVisible="searchVisible"
				@on-export="$emit('on-export', $event)"
			></v-toolset>
		</div>
		<div class="v-content-main" v-show="!loading">
			<el-row :gutter="20">
				<el-col v-if="hasTreeSlot" :span="6">
					<div class="content-card">
						<slot name="tree"></slot>
					</div>
				</el-col>
				<el-col :span="hasTreeSlot ? 18 : 24">
					<div class="content-card">
						<v-search-bar
							v-show="searchVisible"
							v-if="hasSearchSlot"
							@on-reset-search="$emit('on-reset-search')"
							@on-search="$emit('on-search')"
							:showLength="searchLength"
						>
							<slot name="search"></slot>
						</v-search-bar>
						<div class="content-tools" v-if="hasMain">
							<slot name="main"></slot>
						</div>
						<slot></slot>
						<template v-if="hasFooterSlot">
							<div class="content-footer">
								<slot name="footer"></slot>
							</div>
						</template>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="loading-content" v-show="loading">
			<div class="triple-spinner"></div>
			<div class="loading">
				<div class="text">{{ loadingText }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, useSlots, shallowRef } from "vue"
import { useRoute } from "vue-router"
import VToolset from "./toolset/index.vue"
import { useLoading } from "./modules/useLoading"
import { useFooter } from "./modules/useFooter"

const props = defineProps({
	hasToolset: {
		type: Boolean,
		default: true,
	},
	hasSearch: {
		type: Boolean,
		default: true,
	},
	hasExport: {
		type: Boolean,
		default: true,
	},
	hasColumn: {
		type: Boolean,
		default: true,
	},
	loading: {
		type: Boolean,
		default: true,
	},
	tableOptions: {
		type: Array,
		default: () => [],
	},
	searchLength: {
		type: Number,
		default: 3,
	},
})
defineEmits(["on-reset-search", "on-search", "on-export"])
const slots = useSlots()
const route = useRoute()

const hasTreeSlot = computed(() => !!slots.tree)
const hasSearchSlot = computed(() => !!slots.search)
const hasMain = computed(() => !!slots.main)
const hasFooterSlot = computed(() => !!slots.footer)

const isHome = computed(() => route.path === "/" || route.path === "")
const name = computed(() => {
	if (isHome.value) {
		return ""
	}
	return route.meta.title
})

const { loadingText } = useLoading(props)

const searchVisible = shallowRef(true)

useFooter(hasFooterSlot, props)
</script>

<style lang="scss" scoped></style>
